<template>
  <div class="main-layout">
    <!-- 头部组件 -->
    <Header />
    <!-- 内容区域 -->
    <main class="content-area">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
    <Footer/>
  </div>
</template>

<script setup>
import Header from '@/components/common/Header.vue'
import Footer from '@/components/common/Footer.vue'
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9f9f9;
  background-image: linear-gradient(135deg, #f9f9f9 0%, #f5f7fa 100%);
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 防止水平滚动条 */
}

.content-area {
  flex: 1;
  padding: 25px;
  max-width: 1200px;
  width: 100%;
  margin: 20px auto 0; /* 修改为上边距20px，左右auto，下边距0 */
  background-color: #ffffff;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  position: relative;
  overflow: visible;
  z-index: 1;
}

.content-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #ff6b6b, #ff8e53);
}

/* 添加全局样式重置 */
:global(html), :global(body) {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
</style>